<template>
  <div>
    <table>
      <tr class="trl">
        <th><input type="checkbox" v-model="isAll"></th>
        <th><span>已购商品({{ total }})</span></th>
      </tr>
      <tr v-for="obj in objList" :key="obj.id">       
        <input type="checkbox" v-model="obj.isChecked">
         <p><img :src=obj.img></p>
        <td class="content-bx">
          <div class="top">
            <span class="span1">{{ obj.name }}</span>
            <span class="span2">{{ obj.describe  }}</span>
          </div>
          <div class="bottom">
          <div class="span-box">
            <span class="span3">{{ obj.price }}</span>
            <del class="del">{{ obj.costPrice }}</del>
          </div>
          <div>
             <button @click="toDel(obj.id)">-</button>
             <span class="span4">{{ obj.num }}</span>
             <button @click="toAdd(obj.id)">+</button>
          </div>
         </div>
        </td>
      </tr>
      <tr>
        <td colspan="3" class="td4">
          <div class="div1">
            <div class="div2">预计到手<span>{{ totalPrice }}</span></div>
            <button :class="totalPrice === 0 ? 'color1' : 'color2'">{{ totalPrice === 0 ? '不可结算' : '去结算' }}</button>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      objList: [
        { id:'', img:require ("@/assets/酱香拿铁.jpg"),name: "酱香拿铁", describe :"酱香专属红杯/冰/不另外加糖/默认奶油",  price:"¥19",isChecked: false },
        { id:'', img:require("@/assets/马斯卡彭生烙拿铁.jpg") ,name: "马斯卡彭生酪拿铁", describe :"热/不另外加糖",   price: "¥19",  isChecked: false},
        { id:'', img: require ("@/assets/圣诞烤布丁拿铁.jpg"),name: "圣诞烤布丁拿铁", describe :"热/标准甜/默认奶油/大师浓缩", price:"¥19", isChecked: false  },
        { id:'', img: require("@/assets/热红酒美式.jpg") ,name: "热红酒美式", describe :"热/少甜",   price:"¥19",isChecked: false}
      ],
    }
  },
  computed:{
    isAll:{
      get(){
      return this.objList.every(obj => obj.isChecked)
     },
     set(val){
      this.objList.forEach(obj => obj.isChecked = val)
     }
   },
   total(){
    let num1 = 0
    this.objList.forEach(obj => {
      obj.isChecked === true ? num1  += obj.num: ''
    })
    return num1
   },
   totalPrice(){
    let sum = 0
    this.objList.filter(obj => obj.isChecked).forEach(obj => sum += obj.num * obj.price)
    return sum
   }
  },
  methods:{
    toDel(id){
      this.objList.forEach(obj => {
        if(obj.id === id){
          if(obj.num > 1){
            obj.num -= 1
          }else{
            let tarInd = this.objList.findIndex(obj => obj.id === id)
            tarInd !== -1 ? this.objList.splice(tarInd,1) : ''
          }
        }
      })
    },
    toAdd(id){
      this.objList.forEach(obj => {obj.id === id ? obj.num += 1 : '' })
    }
  }
}
</script>

<style>
img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
button{
  border: 0;
}
.top{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.span1{
  font-size: 18px;
  font-weight: 600;
}
.span2{
  font-size: 14px;
  color: #9999;
}
.bottom{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.span3{
  font-size: 18px;
  font-weight: 600;
  color:red;
  margin-right: 5px;
}
.del{
  font-size: 12px;
  color: #9999;
}
.left-button{
  width: 20px;
  height: 20px;
  color: #0921a2;
  border: 1px solid #0921a2;
  border-radius: 50%;
  background-color: #fff;
}
.right-button{
  width: 20px;
  height: 20px;
  color:#fff;
  border: 1px solid #0921a2;
  border-radius: 40%;
  background-color: #fff;
}
.span4{
  margin: 0 7px;
  color:#0921a2 ;
}
.div1{
  display: flex;
  align-items: center;
  width: 400px;
  height: 80px;
  margin-left: 10px;
  border-radius: 40px;
  background-color: #f6efef8d;
}
.div2{
  width: 350px;
  height: 80px;
  line-height: 80px;
  font-size: 20px;
}
.div2 span{
  margin-left: 5px;
  color: red;
}
.div1 button{
  width: 110px;
  height: 80px;
  font-size: 20px;
  border-bottom-right-radius: 40px;
  border-top-right-radius: 40px;
}
.color1{
  color: #fff;
  background-color: #9999;
}
.color2{
  color: #fff;
  background-color: #0921a2;
}
</style>